<template>
  <div class="home">
    <HelloWorld msg="Welcome to Your Vue.js App" class="animated fadeInRight" data-animate="animated fadeInLeft"/>    <!-- animate.js使用 -->

    <van-steps :active="active" >
      <van-step>买家下单</van-step>
      <van-step>商家接单</van-step>
      <van-step>买家提货</van-step>
      <van-step>交易完成</van-step>
    </van-steps>
    <Child @FatherMethod="fatherMethod" />
    <Children :FatherFun="fatherFun" />

    <div v-if="isShow">显示|隐藏</div>
    <div>222{{Test}}</div>
    <div @click="commitBtn">提交</div>
    
    
    <!-- wow.js使用 -->
    <section class="wow slideInRight">wow动画使用</section>

    <!-- 获取dom -->
    <div class="side">
      sdfbfd的非官方的股份的合计
      <div style="height:400px" ref="text">2222</div>
    </div>
    <section class="wow slideInUp">wow22222222动画使用</section>
    <div @click="btnHander">按钮</div>


    

    <Footer />
  </div>
</template>

<script>
import { Step, Steps } from "vant";
// Vue.use(Step).use(Steps);
import { mapGetters, mapState } from "vuex";
import { WOW } from 'wowjs'
export default {
  name: "home",
  components: {
    //一定在注册组件的时候有name属性，不然会报错
    [Step.name]: Step,
    [Steps.name]: Steps
  },
  computed: {
    ...mapGetters(["roles"]),
    ...mapState(["Test"])
  },
  data() {
    return {
      active: 1,
      show: false
    };
  },
  methods: {
    fatherMethod(getCdata) {
      console.log("测试:" + getCdata);
    },
    fatherFun() {
      console.log(22);
    },
    isShow() {
      if (this.show == false) {
        console.log(22);
        return true;
      } else {
        return false;
      }
    },
    commitBtn() {
      this.$store.commit("addTest", 1);
    },

    btnHander(){
      // var height= this.$refs.text.offsetHeight; 
      let height=this.$refs.text.style.height;
      console.log(height)
    }
  },
  mounted(){
    // 初始化WOW.js
    // new WOW({
    //   boxClass: 'wow',
    //   animateClass: 'animated',
    //   offset: 0,
    //   mobile: true
    // }).init() 

    new WOW().init() //简写

    let height  = this.$el.querySelector('.side').getBoundingClientRect().height       
    console.log('js返回元素的大小及其相对于视口的位置。'+height )
  }
};
</script>
